//主播周贡献榜（功能13）
//需要配置4个接收数据，格式大致为[{},{}]
//数据部分还有点问题，但大概想法是传主播名称或者房间号回去，然后返回相应的列表数据（该页面所需的数据交互较多，注意别乱了）
<template>
  <div>
    <blockquote>数据截止至2021年8月9日</blockquote>
    <div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="网游竞技" name="first"></el-tab-pane>
        <el-tab-pane label="单机热游" name="second"></el-tab-pane>
        <el-tab-pane label="娱乐天地" name="third"></el-tab-pane>
        <el-tab-pane label="手游休闲" name="fourth"></el-tab-pane>
      </el-tabs>
    </div>
    <div v-if="activeName === 'first'">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="title" label="直播间名"> </el-table-column>
        <el-table-column prop="nick" label="主播名"> </el-table-column>
        <el-table-column prop="totalHot" label="热度"> </el-table-column>
        <el-table-column label="查看详情">
          <template slot-scope="scope">
            <el-button @click="handleDetile(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div v-if="activeName === 'second'">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="title" label="直播间名"> </el-table-column>
        <el-table-column prop="nick" label="主播名"> </el-table-column>
        <el-table-column prop="totalHot" label="热度"> </el-table-column>
        <el-table-column label="查看详情">
          <template slot-scope="scope">
            <el-button @click="handleDetile(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div v-if="activeName === 'third'">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="title" label="直播间名"> </el-table-column>
        <el-table-column prop="nick" label="主播名"> </el-table-column>
        <el-table-column prop="totalHot" label="热度"> </el-table-column>
        <el-table-column label="查看详情">
          <template slot-scope="scope">
            <el-button @click="handleDetile(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div v-if="activeName === 'fourth'">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="title" label="直播间名"> </el-table-column>
        <el-table-column prop="nick" label="主播名"> </el-table-column>
        <el-table-column prop="totalHot" label="热度"> </el-table-column>
        <el-table-column label="查看详情">
          <template slot-scope="scope">
            <el-button @click="handleDetile(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-drawer :visible.sync="table" direction="rtl" size="50%">
      <div>
        <el-table :data="contribution.slice((currentPage - 1) * pageSize, currentPage * pageSize)" style="width: 100%">
          <el-table-column prop="number" label="排名"> </el-table-column>
          <el-table-column prop="nick" label="粉丝昵称"> </el-table-column>
          <el-table-column prop="score" label="周贡献度"> </el-table-column>
        </el-table>
        <el-pagination
      :current-page="currentPage"
      :page-size="pageSize"
      @current-change="handleCurrentChange"
      background
      layout="prev, pager, next"
      :total="totalCount"
    ></el-pagination>         
      </div>
    </el-drawer>
  </div>
</template>
<script>
import stores from "@/store";
export default {
  data() {
    return {
      currentPage:1,
      pageSize:15,
      totalCount:50,         
      table: false,
      activeName: "first",
      roomNumber: "",
      tableData: [
        {
          title: "1",
          nick: "2",
          totalHot: "3",
        },
      ],
      contribution: [
        {
          score: "",
          nick: "",
          number: "",
        },
      ],
    };
  },
  methods: {
    handleCurrentChange(page) {
      this.currentPage = page;
    },        
    //获取相应的数据
    handleClick(tab, e) {
      this.$axios
        .post(
          stores.spring_url + "/home/function15/" + this.activeName,
          this.activeName
        )
        .then((res) => {
       res.data.tableData.sort(function(obj1,obj2){

          let val1 = obj1.totalHot
          let val2 = obj2.totalHot
          return val2 - val1

        } )           
          console.log(res.data.tableData);
          this.tableData = res.data.tableData;
        });
      console.log(this.activeName);
    },
    handleDetile(row) {
      console.log(row), (this.roomNumber = row.roomNumber);
      this.$axios
        .get(stores.spring_url + "/home/function13/contribution", {
          params: { roomNumber: this.roomNumber },
        })
        .then((res) => {
          console.log(res.data.contribution);
          this.contribution = res.data.tableData;
        });

      this.table = true;
    },
  },
  mounted() {
    this.$axios
      .post(stores.spring_url + "/home/function15/first", "first")
      .then((res) => {
        console.log(res)
       res.data.tableData.sort(function(obj1,obj2){

          let val1 = obj1.totalHot
          let val2 = obj2.totalHot
          return val2 - val1

        } ) 
         
             
        //console.log(res.data.tableData);
        this.tableData = res.data.tableData;
      });
  },
};
</script>
<style>
blockquote {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 40px;
    margin-inline-end: 40px;
    font-size: 12px;
    box-sizing: border-box;
    height: 30px;
    line-height: 30px;
    background: #fde2e2;
    border: 1px solid #F56C6C;
    padding-left: 15px;
    color :#F55151;
    margin-left: 0;
    margin-top: 0;
    margin-right: 0;
}
</style>